<template>
    <div>
        <a-upload-dragger
            name="file"
            :multiple="true"
            :defaultFileList="fileList"
            @change="handleChange"
            :remove="fileListRemove"
            :customRequest="customRequest"
            :action="handleFileUpdata">
            <p class="ant-upload-drag-icon">
                <a-icon type="cloud-upload"/>
            </p>
            <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
            <p class="ant-upload-hint">支持扩展名：.rar, .zip, .docx, .pdf, .jpg...</p>
        </a-upload-dragger>
    </div>
</template>

<script>
    import indexedDB from '@/db/db'
    export default {
        name: "UpLoadDrag",
        props:{
        
        },
        data(){
            return{
                fileList: [],
            }
        },
        methods:{
            updata(file){
                try {
                    let value = {
                        name: file.name,
                        file: file
                    }
                    return new Promise((resolve,reject)=>{
                        indexedDB.fileInsert({name: 'files'}, value).then(id => {
                            if(id){
                                indexedDB.get({name: 'files'},id).then(res=>{
                                    let obj = res[0]
                                    let result = {
                                        name: obj.name,
                                        status:"done",
                                        url: URL.createObjectURL(obj.file),
                                        thumbUrl: ''
                                    }
                                    resolve(result)
                                })
                            } else {
                                reject(false)
                            }
                            
                        })
                    })
                } catch (e) {
                    return Promise.resolve(false);
                }
            },
            customRequest(data) {
                let progress= { percent: 1 }
                const intervalId = setInterval(() => {
                    if (progress.percent < 100) {
                        progress.percent++
                        data.onProgress(progress)
                    } else {
                        clearInterval(intervalId)
                    }
                }, 100)
                this.updata(data.file).then(res=>{
                    progress.percent =100
                    data.onSuccess(res)
                })

            },
            handleFileUpdata(e){
                // console.log(e)
            },
            fileListRemove(e){
                // console.log(e)
                // console.log(this.fileList)
            },
            handleChange(info) {
                // console.log(info)
                const status = info.file.status;
                if (status === 'done') {
                    this.$message.success(`${info.file.name} 文件上传成功.`)
                    this.$emit('change', info.fileList)
                } else if (status === 'removed') {
                    this.$emit('change', info.fileList)
                }else if (status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
        }
    }
</script>

<style scoped>

</style>